<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JSON 智能修复测试</title>
    <style>
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
            background-color: #f5f5f5;
        }
        
        .test-container {
            background: white;
            border-radius: 8px;
            padding: 20px;
            margin-bottom: 20px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        
        .test-title {
            font-size: 18px;
            font-weight: 600;
            margin-bottom: 15px;
            color: #333;
        }
        
        .test-description {
            color: #666;
            margin-bottom: 15px;
            font-size: 14px;
        }
        
        .test-input {
            width: 100%;
            min-height: 100px;
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 4px;
            font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
            font-size: 12px;
            margin-bottom: 10px;
        }
        
        .test-button {
            background: #667eea;
            color: white;
            border: none;
            padding: 8px 16px;
            border-radius: 4px;
            cursor: pointer;
            font-size: 14px;
            margin-right: 10px;
        }
        
        .test-button:hover {
            background: #5a67d8;
        }
        
        .test-result {
            margin-top: 15px;
            padding: 10px;
            border-radius: 4px;
            font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
            font-size: 12px;
            white-space: pre-wrap;
            word-break: break-all;
        }
        
        .test-result.success {
            background: #d4edda;
            border: 1px solid #c3e6cb;
            color: #155724;
        }
        
        .test-result.error {
            background: #f8d7da;
            border: 1px solid #f5c6cb;
            color: #721c24;
        }
        
        .header {
            text-align: center;
            margin-bottom: 30px;
        }
        
        .header h1 {
            color: #333;
            margin-bottom: 10px;
        }
        
        .header p {
            color: #666;
            font-size: 16px;
        }
    </style>
</head>
<body>
    <div class="header">
        <h1>JSON 智能修复功能测试</h1>
        <p>测试各种常见的 JSON 格式错误修复功能</p>
    </div>

    <div class="test-container">
        <div class="test-title">测试 1: 单引号转双引号</div>
        <div class="test-description">修复 JavaScript 风格的单引号为 JSON 标准的双引号</div>
        <textarea class="test-input" id="test1">{
  name: 'John Doe',
  age: 30,
  city: 'New York',
  hobbies: ['reading', 'swimming'],
  active: true
}</textarea>
        <button class="test-button" onclick="testRepair(1)">测试修复</button>
        <div id="result1" class="test-result" style="display: none;"></div>
    </div>

    <div class="test-container">
        <div class="test-title">测试 2: 未引用的属性名</div>
        <div class="test-description">修复未加引号的属性名</div>
        <textarea class="test-input" id="test2">{
  name: "John",
  age: 30,
  city: "New York",
  isActive: true,
  hobbies: ["reading", "swimming"]
}</textarea>
        <button class="test-button" onclick="testRepair(2)">测试修复</button>
        <div id="result2" class="test-result" style="display: none;"></div>
    </div>

    <div class="test-container">
        <div class="test-title">测试 3: 尾随逗号</div>
        <div class="test-description">移除对象和数组末尾的尾随逗号</div>
        <textarea class="test-input" id="test3">{
  "name": "John",
  "age": 30,
  "hobbies": [
    "reading",
    "swimming",
  ],
  "address": {
    "street": "123 Main St",
    "city": "New York",
  },
}</textarea>
        <button class="test-button" onclick="testRepair(3)">测试修复</button>
        <div id="result3" class="test-result" style="display: none;"></div>
    </div>

    <div class="test-container">
        <div class="test-title">测试 4: 注释处理</div>
        <div class="test-description">移除 JavaScript 风格的注释</div>
        <textarea class="test-input" id="test4">{
  // 用户信息
  "name": "John Doe",
  "age": 30,
  /* 地址信息 */
  "address": {
    "street": "123 Main St",
    "city": "New York"
  },
  // 爱好列表
  "hobbies": ["reading", "swimming"]
}</textarea>
        <button class="test-button" onclick="testRepair(4)">测试修复</button>
        <div id="result4" class="test-result" style="display: none;"></div>
    </div>

    <div class="test-container">
        <div class="test-title">测试 5: 复杂错误组合</div>
        <div class="test-description">包含多种错误的复杂 JSON</div>
        <textarea class="test-input" id="test5">{
  // 用户数据
  name: 'John Doe',
  age: 30,
  email: john.doe@example.com,
  isActive: true,
  hobbies: [
    'reading',
    'swimming',
  ],
  address: {
    street: '123 Main St',
    city: 'New York',
    zipCode: 10001,
  },
  // 额外信息
  metadata: {
    createdAt: '2023-01-01',
    updatedAt: '2023-12-01',
  },
}</textarea>
        <button class="test-button" onclick="testRepair(5)">测试修复</button>
        <div id="result5" class="test-result" style="display: none;"></div>
    </div>

    <div class="test-container">
        <div class="test-title">测试 6: 缺失引号</div>
        <div class="test-description">修复缺失的引号</div>
        <textarea class="test-input" id="test6">{
  "name": John Doe,
  "age": 30,
  "city": New York,
  "status": active,
  "tags": [important, urgent, new]
}</textarea>
        <button class="test-button" onclick="testRepair(6)">测试修复</button>
        <div id="result6" class="test-result" style="display: none;"></div>
    </div>

    <div class="test-container">
        <div class="test-title">测试 7: 布尔值和 null</div>
        <div class="test-description">修复被错误引用的布尔值和 null</div>
        <textarea class="test-input" id="test7">{
  "name": "John",
  "isActive": "true",
  "isAdmin": "false",
  "middleName": "null",
  "settings": {
    "notifications": "true",
    "darkMode": "false"
  }
}</textarea>
        <button class="test-button" onclick="testRepair(7)">测试修复</button>
        <div id="result7" class="test-result" style="display: none;"></div>
    </div>

    <script src="jsonrepair.js"></script>
    <script>
        function testRepair(testNumber) {
            const input = document.getElementById(`test${testNumber}`).value;
            const resultDiv = document.getElementById(`result${testNumber}`);
            
            try {
                // 检查 jsonrepair 库是否可用
                if (typeof JSONRepair === 'undefined' || typeof JSONRepair.jsonrepair !== 'function') {
                    resultDiv.textContent = '错误: 智能修复库未加载';
                    resultDiv.className = 'test-result error';
                    resultDiv.style.display = 'block';
                    return;
                }

                // 使用 jsonrepair 修复
                const repaired = JSONRepair.jsonrepair(input);
                
                // 验证修复结果
                JSON.parse(repaired);
                
                resultDiv.textContent = `修复成功！\n\n修复后的 JSON:\n${repaired}`;
                resultDiv.className = 'test-result success';
                resultDiv.style.display = 'block';
                
            } catch (error) {
                resultDiv.textContent = `修复失败: ${error.message}`;
                resultDiv.className = 'test-result error';
                resultDiv.style.display = 'block';
            }
        }

        // 页面加载完成后检查库是否可用
        document.addEventListener('DOMContentLoaded', function() {
            if (typeof JSONRepair === 'undefined' || typeof JSONRepair.jsonrepair !== 'function') {
                alert('警告: JSON 智能修复库未正确加载，请检查 jsonrepair.js 文件');
            } else {
                console.log('JSON 智能修复库加载成功');
            }
        });
    </script>
</body>
</html> 